<template>
    <div class="con">
        <div class="header">
            <img :src="url" alt=""/>
            <ul>
                <li>联系我们</li>
                <li>关于我们</li>
                <li>个人主页</li>
            </ul>
            <div class="avatar">
                <img :src="avatar">
            </div>
        </div>
    </div>
</template>
<script>

export default {
  name: 'index',
  props: {
    msg: String
},
data(){
return {
    url:'https://by-image.oss-cn-shanghai.aliyuncs.com/yfront/static/commonbg/logo.png',
    avatar:'https://by-image.oss-cn-shanghai.aliyuncs.com/yfront/static/offline/pic_touxiang_zyf.png'
        }
    },
}
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .con{
        width: 100%;
        height: 60px;
        margin: 0 auto;
        box-shadow:  0px 2px 2px rgba(0, 0, 0, .2);
        position: relative;
    }
    .header{
        width: 60%;
        height: 60px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
    }
    .con img{
        width: 170px;
    }
    ul >li {
        display: inline-block;
        width: 100px;
    }
    .avatar{
            position: absolute;
            right: 60px;
            width: 60px;
        }
    .avatar img{
        width: 30px;
        height: 30px;
    }
</style>
